<template>
    <ph-flex class="ph-tab-nav">
        <Button
        v-for="(item,index) in navs" 
        v-indicator="current===item.id"
        @shift="$emit('shift',item.id)"
        @close="$emit('close',item.id)"
        :key="index"
        :active="current===item.id"
        :icon="item.icon"
        :closable="closable"
        :type="type"
        >
            {{item.title}}
        </Button>
        <ph-indicator :show="ishow" :tx="tx" :w="iw"></ph-indicator>
    </ph-flex>
</template>
<script lang="ts">
import { defineComponent , ref} from 'vue'
import Button from './tab-button.vue'
import {PhFlex,PhIndicator} from '../base'
export default defineComponent({
    tabs: [],
    name:"TabNav",
    directives:{
        indicator:{
            mounted(el:HTMLElement,binding:any){
                if(binding.value){
                    const {offsetLeft,offsetWidth} = el
                    binding.instance.updateIndicator(offsetLeft,offsetWidth)
                }
            },
            updated(el:HTMLElement,binding:any){
                if(binding.value){
                    const {offsetLeft,offsetWidth} = el
                    binding.instance.updateIndicator(offsetLeft,offsetWidth)
                }
            }
        }
    },
    props:{
        navs:{
            type:Array,
            default:()=>[]
        },
        type:{
            type:String //card|none->default
        },
        current:{type:Number},
        closable:{
            type:Boolean,
            default:false
        },
        icon:{type:String}
    },
    components:{PhFlex,Button,PhIndicator},
    setup() {
        const ishow = ref(false)
        const tx = ref(0)
        const iw = ref(0)
        const updateIndicator = (x:number,w:number)=>{
            ishow.value = true
            tx.value = x
            iw.value = w
        }
        return { ishow , tx , iw, updateIndicator}
    }
})
</script>
<style lang="scss">
.ph-tab-nav{
    text-align: left;
    border-bottom:1px solid var(--ph-bd-light);
    position:relative;
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling:touch;
    .ph-tab-item:not(:first-child){
        margin-left: -1px;
    }
}
</style>
